<template>
  <div class="issue-traching">
    <div class="plan-node">
      <div class="label">
        计划节点
      </div>
      <el-date-picker class="date-picker" :class="edit ? 'edit-picker' : ''" v-model="date" @change="dateChangeHandle" value-format="timestamp"  :editable="false" :readonly="!edit" type="date" :placeholder=" edit ? '请选择' : ''" :clearable="false" style="width: 100%;"   />
      <!-- <div class="plan-time">
        {{date}}
      </div>
      <i class="el-icon-arrow-down"></i> -->
    </div>
    <div class="plan-status">
      <div class="label">
        是否完成
      </div>
      <div class="border-right statuc-action">
        <el-button class="btn-check" :class="(progress === 1) ? 'active' : ''" icon="el-icon-check" @click="modifyOver"></el-button>
        <el-button class="btn-alter" :class="(progress === 0) ? 'active' : ''" icon="el-icon-close" @click="modifyHandle"></el-button>
      </div>
      <div class="label">
        变更次数
      </div>
      <div class="alter-count">
        {{count || 0}}
      </div>
    </div>
  </div>
</template>

<script>
// 进度跟踪组件
export default {
  props: {
    edit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Number,
      default: null
    },
    progress: {
      type: [Number, String],
      default: null
    },
    count: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      date: this.value || ''
    }
  },
  methods: {
    modifyOver(){
      this.$emit('modify', true)
    },
    modifyHandle() {
      this.$emit('modify', false)
    },
    dateChangeHandle(val) {
      this.$emit('change', val)
    }
  }
}
</script>

<style lang="scss" scoped>
  .issue-traching{

  }
  .border-right{
    border-right: 1px solid #C1C8D7;
  }
  .plan-node,
  .plan-status{
    display: flex;
    align-items: center;
    height: 32px;
    border: 1px solid #C1C8D7;
    border-radius: 3px;

    & > div {
      height: 100%;
    }
  }
  .label{
    flex-shrink: 0;
    width: 36px;
    font-size: 12px;
    color: #505971;
    line-height: 14px;
    text-align: center;
    border-right: 1px solid #C1C8D7;
  }

  .plan-time,
  .alter-count{
    font-size: 16px;
    color: #111434;
    line-height: 32px;
  }

  .plan-time{
    flex: 1;
    text-align: center;
  }

  .el-icon-arrow-down{
    margin: 0 9px 0 7px;
    color: #505971;
  }

  .plan-status{
    margin-top: 2px;
  }
  
  .alter-count{
    margin: 0 7px;
  }

  .statuc-action{
    padding: 3px;
  }

  .btn-check,
  .btn-alter {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 18px;
    color: #7E8699;
    border: 1px solid #C1C8D7;
    background: linear-gradient(0deg, #CDD4E3 0%, #FFFFFF 100%);
    border-radius: 3px;

    &.active{
      color: #fff;
      border: none;
    }
  }

  .btn-check.active {
    background: linear-gradient(0deg, #03BF72 0%, #00EF8D 99%);
  }
  .btn-alter{
    margin-left: 1px !important;

    &.active{
      background: linear-gradient(0deg, #E34038 0%, #FF5F57 100%);
    }
  }

  .date-picker{
    ::v-deep{
      .el-input__inner {
        height: 30px;
        padding-top: 2px;
        padding-left: 5px;
        font-size: 16px;
        line-height: 30px;
        color: #111434;
        border: none;
      }

      .el-icon-date{
        font-size: 18px;
        line-height: 30px;
      }
    }

    &.edit-picker {
      ::v-deep{
        .el-icon-date {
          color: #333;
        }
      }
    }
  }
</style>